BootstrapVue — Scrollspys and Toggles

To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in. In this article, we look at how to customize scrollspys. Also, we look at how to use toggles.

Scrollspys and List Groups

Scrollspys works with list groups. So it can highlight the element with the ID that’s shown.

For example, we can write:

<template>
  <div id="app">
    <b-container fluid>
      <b-row>
        <b-col cols="4">
          <b-list-group v-b-scrollspy:listgroup>
            <b-list-group-item href="#list-item-1">Item 1</b-list-group-item>
            <b-list-group-item href="#list-item-2">Item2</b-list-group-item>
            <b-list-group-item href="#list-item-3">Item 3</b-list-group-item>
            <b-list-group-item href="#list-item-4">Item 4</b-list-group-item>
            <b-list-group-item href="#list-item-5">Item 5</b-list-group-item>
          </b-list-group>
        </b-col>

<b-col cols="8">
          <div id="listgroup" style="position:relative; overflow-y:auto; height:300px">
            <h4 id="list-item-1">Item 1</h4>
            <p>{{ text }}</p>
            <h4 id="list-item-2">Item 2</h4>
            <p>{{ text }}</p>
            <h4 id="list-item-3">Item 3</h4>
            <p>{{ text }}</p>
            <h4 id="list-item-4">Item 4</h4>
            <p>{{ text }}</p>
            <h4 id="list-item-5">Item 5</h4>
            <p>{{ text }}</p>
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: "lorem ipsum"
    };
  }
};
</script>

We have the b-list-group component that has the v-b-scrollspy directive with the listgroup modifier. That’s the same as the ID of the div that the scrollspy is watching. Therefore, when we scroll up and down, we’ll see the link for the div with the given ID highlighted.

Scrollspy on Components with the to Prop

Scrollspys also works with Vue Router and Nuxt’s router.

For example, we can write:

<b-nav-item to="#id">link</b-nav-item>

or:

<b-nav-item :to="{ hash: '#id' }">link</b-nav-item>

They both link to some element with the given ID, so it’ll work.

Scrollspy Events

We can watch for events emitted by the v-b-scrollspy directive with the thus.$root.$on method.

For example, we can write:

const app = new Vue({
  el: '#app',
  created() {
    this.$root.$on('bv::scrollspy::activate', this.onActivate)
  },
  methods: {
    onActivate(target) {
      console.log(target)
    }
  }
})

Now we watch the activate event emitted by the scrollspy. target has the target element for the scrollspy, which is the element with the ID that is visible.

Toggle

v-b-toggle is a lightweight directive for toggling the visibility of collapses and sidebars.

For instance, we can use it by writing:

<template>
  <div id="app">
    <b-button v-b-toggle.collapse>toggle</b-button>

    <b-collapse id="collapse">
      <b-card title="Collapsible card">hello!</b-card>
    </b-collapse>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have a b-button with the v-b-toggle directive. It also has the collapse modifier. The modifier name matches the id value of the b-collapse component. Therefore, it’ll toggle the b-collapse component on and off. Likewise, we can toggle the sidebar on and off with the v-b-toggle directive.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-toggle.sidebar>toggle</b-button>

    <b-sidebar id="sidebar" title="Sidebar" shadow>
      <div class="px-3 py-2">
        lorem ipsum
      </div>
    </b-sidebar>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We have the b-sidebar component which has the id set to sidebar . This matches the modifier name, so it’ll toggle on and off the sidebar.

Hiding and Showing Content in the Toggle Trigger Element

The when-open and when-close classes will be added to the button that toggles the collapse or sidebar. Therefore, we can use it to hide and show content depending on the toggle status of those components.

For example, we can write:

<template>
  <div id="app">
    <b-button v-b-toggle.collapse>
      <span class="when-open">close</span>
      <span class="when-closed">open</span>
      collapse
    </b-button>

<b-collapse id="collapse">collapse</b-collapse>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
.collapsed > .when-open,
.not-collapsed > .when-closed {
  display: none;
}
</style>

When the collapse is open, we see ‘close collapse’. Otherwise, we see ‘open collapse’.

This is because we hide content if we have .collapsed > .when-open or the .not-collapsed > .when-closed selectors.

Conclusion

We can use scrollspys to highlight links in list groups. Also, we can use toggles to toggle collapses and sidebars on and off.